<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- HTML结构 -->
    <form id="test-form" action="test">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <p>
                <label class="selectAll">
                    <input type="checkbox">
                    <span class="selectAll">全选</span>
                    <span class="deselectAll">全不选</span>
                </label> <a href="#0" class="invertSelect" onclick="fg()">反选</a>
            </p>
            <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
            <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
            <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
            <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
            <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
            <p><button type="submit">Submit</button></p>
        </fieldset>
    </form>

    <!-- 要求:
绑定合适的事件处理函数，实现以下逻辑：
当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
当用户去掉“全不选”时，自动不选中所有语言；
当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。 -->
    <script>
        var a = document.getElementsByClassName('selectAll');
        var b = document.getElementsByTagName("input");
        console.log(b);
        //全选
        b[0].onclick = function () {
            var b = document.getElementsByTagName('input');

            for (let i = 1; i < b.length; i++) {
                if (b[0].checked === true) {
                    b[i].checked = true;
                } else if (b[0].checked === false) {
                    b[i].checked = false;
                }
            }
        }

        //反选
        var inversel = document.getElementsByClassName("invertSelect");
        function fg() {
            if (asd() === false) {
                for (let i = 1; i < b.length; i++) {
                    if (b[i].checked === true) {
                        b[i].checked = false;
                    } else if (b[i].checked === false) {
                        b[i].checked = true;
                    }
                    b[0].checked = false;
                }
            } else if (asd() === true) {
                for (let i = 0; i < b.length; i++) {
                    if (b[i].checked === true) {
                        b[i].checked = false;
                    } else if (b[i].checked === false) {
                        b[i].checked = true;
                    }
                }
            }

        }

        //逐个点击
        for (let i = 1; i < b.length; i++) {
            b[i].onclick = function () {
                if (asd() === false) {
                    b[0].checked = false;
                }
                if (asd() === true) {
                    b[0].checked = true;
                }
            }

        }
        //判断
        function asd() {
            var count = 1;
            for (let i = 1; i < b.length; i++) {
                if (b[i].checked === true) {
                    count++;
                } else if (b[i].checked === false) {
                    count--;
                }
            }
            if (count === b.length || count === -b.length) {
                return true;
            }
            return false;
        };
    </script>
</body>

</html>